<?php /*a:3:{s:59:"D:\phpstudy_pro\WWW\oldi-erp\app\admin\view\menu\index.html";i:1747733331;s:62:"D:\phpstudy_pro\WWW\oldi-erp\app\admin\view\public\header.html";i:1747733208;s:61:"D:\phpstudy_pro\WWW\oldi-erp\app\admin\view\public\style.html";i:1747733208;}*/ ?>
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>ERP</title>

    <link rel="stylesheet" href="/static/css/element-ui@2.15.14.css">
    <script src="/static/js/vue.js"></script>
    <script src="/static/js/element-ui@2.15.14.js"></script>
    <script src="/static/js/axios.js"></script>
    <script src="/static/js/qs.js"></script>
    <script src="/static/js/config.js"></script>
    <script src="/static/js/echart.js"></script>


    <style scoped>
        .el-select-dropdown {
        padding: 0;
        }
    </style>
    
<style>
    html,
    body,
    #app {
        padding: 0;
        margin: 0;
    }    
    #contenr{
        padding: 0;
        margin: 10px;
    }
</style>

<body>
    <div id="app"  v-cloak>
        <div id="contenr">
        <el-breadcrumb separator="/">
            <el-breadcrumb-item>首页</el-breadcrumb-item>
            <el-breadcrumb-item>权限管理</el-breadcrumb-item>
            <el-breadcrumb-item>目录列表</el-breadcrumb-item>
        </el-breadcrumb>
        <br>
        <el-card >
            <div style="display: flex;align-items: center;justify-content: flex-start;">
                <el-form :inline="true" :model="searchForm" size="small"  ref="refsearchForm">
                
                    <el-form-item label="菜单名称">
                        <el-input v-model="searchForm.title" placeholder="请输入菜单名称" clearable filterable></el-input>
                    </el-form-item>          
                    <el-form-item label="是否菜单">
                        <el-select v-model="searchForm.ismenu" placeholder="请选择是否菜单" filterable clearable>
                            <el-option v-for="item in ismenuarr" :key="item.value" :label="item.label" :value="item.value">
                            </el-option>
                        </el-select>
                    </el-form-item>     
                    <el-form-item label="菜单状态">
                        <el-select v-model="searchForm.status" placeholder="请选择菜单状态" filterable clearable>
                            <el-option v-for="item in status" :key="item.value" :label="item.label" :value="item.value">
                            </el-option>
                        </el-select>
                    </el-form-item> 
                    <el-form-item>
                        <el-button type="primary"  size="small" plain @click="getSearch"  icon="el-icon-search" v-cloak>查询</el-button>
                        <el-button size="small"  @click="toggleExpand" icon="el-icon-operation">一键{{ isExpand ? '折叠' : '展开' }}</el-button>   
                    </el-form-item> 
                </el-form>
                
                <div style="margin-left: auto;margin-bottom: 20px;margin-right: 20px;" >
                    <el-button  type="primary"   @click="create" size="small"  icon="el-icon-edit" >添加菜单</el-button>      
           
                </div>
            </div>

            <el-table default-expand-all :data="tablelist"   style="width: 100%;margin-bottom: 20px;"  row-key="id"  border  :row-style="rowStyle" :expand-row-keys="expandKeys" :tree-props="{children: 'children', hasChildren: 'hasChildren'}"  ref="treeTable" >
                <el-table-column   prop="title" label="菜单名称"> </el-table-column>    
            
                <el-table-column   prop="url"  label="链接">  </el-table-column>
                <el-table-column   prop="icon"  label="icon图标" width="80px">
                    <template v-slot="{row}">
                        <i :class="row.icon"  style="font-size: 30px;"></i>
                    </template>  
                </el-table-column>
                <el-table-column   prop="sort"  label="权重"  width="80px">  </el-table-column>
                
                <el-table-column   prop="ismenu"  label="是否菜单" width="190"> 
                    <template slot-scope="scope">
                        <el-switch style="display: block" v-model="scope.row.ismenu" active-color="#13ce66" inactive-color="#ff4949" :inactive-value="0" :active-value="1" active-text="是菜单" inactive-text="不是菜单" @change="handleSwitchChange(scope.row)">
                        </el-switch>
                    </template>
                </el-table-column>
                <el-table-column   prop="status"  label="状态" width="100">
                   <template v-slot="{row}">
                       <span v-if="row.status===1">
                           <el-tag type="success">启用</el-tag>
                        </span>
                        <span   v-if="row.status===0">
                           <el-tag type="danger">禁用</el-tag>                                                
                       </span>     
                      
                   </template>

                </el-table-column>
                <el-table-column  fixed="right" label="操作" width="220">
                    <template v-slot="{row}">
                        <el-button type="primary"  plain  icon="el-icon-edit"   @click="editor(row)" >编辑 </el-button>        
                        <el-button type="warning"  plain icon="el-icon-close"   @click="cancel(row.id)">禁用</el-button>             
                    </template>
                </el-table-column>
            </el-table>
            <!-- page -->
            <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="searchForm.pagenum" :page-sizes="[50,100, 150, 300,500,1000,2000]"
                :page-size="searchForm.pagesize" layout="total, sizes, prev, pager, next, jumper" :total="total">
            </el-pagination>  
        </el-card>
        
        <!-- 修改编辑弹窗 -->
        <el-dialog :title="title" :visible.sync="ismenudialogVisible" width="600px" :close-on-click-modal="false">
            <el-form :inline="true" :model="createForm" size="mini"  :rules="isMenurules"  ref="refsearchForm"  :popper-append-to-body="false"  > 
             
                <el-form-item  label="父级目录" style="margin-left: 10px;">   
                    <el-cascader v-model="createForm.pid"   :options="menu"  :props="{ checkStrictly: true , emitPath: false  }"  style="width: 370px;" clearable ></el-cascader>
                 </el-form-item>    

                <el-form-item prop="title" label="菜单名称">
                    <el-input v-model="createForm.title" placeholder="请输入菜单名称" style="width: 370px;"
                            clearable></el-input>
                </el-form-item>              

                <el-form-item prop="url" label="url 链接">
                    <template #label>
                        <span>url链接</span>
                        <el-tooltip class="item" effect="dark" content="" placement="top">
                            <div slot="content">1.请选择前面链接前缀，<br/>2.后面请输入控制器跟方法名称，例如：User/index</div>
                        <i class="el-icon-question"></i>
                        </el-tooltip>
                    </template>
                    <el-row>
                        <el-col :span="8">
                            <el-select v-model="createForm.prefix" placeholder="请选择是链接前缀" filterable >
                                <el-option v-for="item in prefix" :key="item.value" :label="item.value" :value="item.value"  filterable clearable></el-option>
                            </el-select>
                        </el-col>
                        <el-col :span="8">
                            <el-input v-model="createForm.urls"  placeholder="请填写控制器跟方法名称" style="width: 230px;"  filterable clearable></el-input>
                        </el-col>
                    </el-row>
                </el-form-item>

                <el-form-item prop="url" label="是否菜单">
                    <template   >                       
                        <el-radio-group v-model="createForm.ismenu" style="margin-left: 10px;">
                            <el-radio :label="1" border>是菜单</el-radio>
                            <el-radio :label="0" border>不是菜单</el-radio>
                    </el-radio-group> 
                    </template>
                </el-form-item>   
                <el-form-item prop="icon" label="icon图标">
                    <el-input v-model="createForm.icon" placeholder="请输入icon图标" style="width: 370px;"
                    clearable></el-input>
                </el-form-item>   
                <div>      
                    <el-form-item  label="菜单状态:">                                   
                        <el-radio-group v-model="createForm.status" @change="handleStatusChange" style="margin-left: 10px;">         
                            <template>            
                            <el-radio :label="1"  >正常</el-radio>   
                            <el-radio :label="0"  >关闭</el-radio>                     
                        </template>
                        </el-radio-group>                
                    </el-form-item> 
                </div>          
                <el-form-item prop="sort" label="排序权重">
                    <template #label>
                        <span>排序权重</span>
                        <el-tooltip class="item" effect="dark" content="" placement="top">
                            <div slot="content">1.权重数字越小越靠前</div>
                        <i class="el-icon-question"></i>
                        </el-tooltip>
                    </template>
                    <el-input-number v-model="createForm.sort" :min="0"  :max="999" placeholder="请输入排序权重" style="width: 180px;"></el-input-number>
                </el-form-item>               
                <div>                                   
                    <el-form-item>
                        <el-button type="primary" @click="checkSubmits">确认</el-button>
                        <el-button type="primary" plain @click="close"> 取消</el-button>
                    </el-form-item>
                </div>
            </el-form>
        </el-dialog>
</div>

<script>
  new Vue({
      el: '#app',
      data: function () {
          return {              
          
            ismenuarr:[
                {
                    value: 2,
                    label: '不是菜单'
                },
                {
                    value: 1,
                    label: '是菜单'
                }
             ],// 是否菜单数组   
             status:[
                {
                    value: 2,
                    label: '关闭'
                },
                {
                    value: 1,
                    label: '正常'
                }
             ],// 状态是否正常   

             prefix:[
                {
                    value: '',                
               },
                {
                    value: '/admin/',                
               },{
                    value: '/index/',                
               }
            ],
              total:'',   //分页总页数      
              tablelist: [],              
              searchForm: {
                  title: '',
                  ismenu: '',
                  pagenum: 1,
                  pagesize: 50,
                  status:''
             
              },
              editForm:{
                ismenu:'',
                id:''
              },
              isExpand: true, // 当前展开状态
              menu:[],
              createForm:{
                icon:'',
                status:1,
                ismenu:'1',
                title:'',
                sort:'',
                url:'',
                urls:'',
                prefix:'/admin/'
              },
              ismenudialogVisible: false,           
              title:'',            
              isMenurules:{
                title: [
                    { required: true, message: '请输入菜单名称', trigger: 'blur' }
                ],
                sort: [
                    { required: true, message: '请输入排序权重', trigger: 'blur' }
                ],
              },
              expandKeys: []             
             
          }
      },
      mounted(){
          this.getSearch()
      },
      methods: {        
        // 动态设置行样式
        rowStyle({ row, rowIndex }) {
            let style = {};       
                if(row.pid==0){
                    style = { backgroundColor: '#d9ecff', color: '#333' }; // 绿色f0f9eb
                }   
          
            return style;           
        },
          async getDatalist() {
            const res = await axios.post('/admin/menu/index', {params: this.searchForm})
                if (res.status !== 1) {
                    return this.$message.error(res.info);
                }
               this.total = res.info.total
               this.tablelist = res.info.list

          },

          //编辑
          async   editor(row){
            const res = await axios.post('/admin/menu/list')           
            if (res.status !== 1) {
                return  this.$message.error(res.info);             
            }
              this.menu = res.info  
              this.title = '编辑菜单'
              this.ismenudialogVisible = true
              this.$set(this.createForm,'icon',row.icon);
              this.$set(this.createForm,'id',row.id);
              this.$set(this.createForm,'pid',row.pid);
              this.$set(this.createForm,'title',row.title);
              this.$set(this.createForm,'sort',row.sort);
              this.$set(this.createForm,'url',row.url);
              this.$set(this.createForm,'urls',row.urls);
              this.$set(this.createForm,'status',row.status);
              this.$set(this.createForm,'ismenu',row.ismenu);
              this.$set(this.createForm,'prefix',row.prefix??'/admin/');             
          },
          //添加权限
          async   create(){
            const res = await axios.post('/admin/menu/list')           
            if (res.status !== 1) {
                return  this.$message.error(res.info);             
            }
            this.menu = res.info   
              this.title = '添加菜单'
              this.ismenudialogVisible = true
              this.createForm.id = ''
              this.createForm.pid = ''
              this.createForm.icon = ''
              this.createForm.status = 1
              this.createForm.ismenu = 1
              this.createForm.title = ''
              this.createForm.sort = ''
              this.createForm.url = ''
              this.createForm.urls = ''
               this.createForm.prefix = '/admin/'
          },        
          handleSizeChange(newSize) {
              this.searchForm.pagesize = newSize
              this.getDatalist()
          },
          handleCurrentChange(newPage) {
              this.searchForm.pagenum = newPage
              this.getDatalist()
          },
          handleSelectionChange(val) {
              this.multipleSelection = val;
          },
     
          getSearch() {
              this.searchForm.pagenum = 1
              this.getDatalist()
          },
          //修改是否是菜单
          handleSwitchChange(row) {
            this.editForm.id = row.id
            this.editForm.ismenu = row.ismenu  

            this.$confirm('确认需要修改是否菜单，如果修改了子级的菜单全部会跟着修改？', '提示', {
                    confirmButtonText: '确定修改',
                    cancelButtonText: '取消修改',
                    closeOnClickModal: false, // 禁用点击遮罩关闭弹窗
                    type: 'warning'
                }).then(() => {
                    let loading = this.$loading({
                        lock: true,
                        text: '菜单处理中···',
                        spinner: 'el-icon-loading',
                        background: 'rgba(0, 0, 0, 0.7)'
                    });
                    axios.post('/admin/menu/update_ismenus', {params: this.editForm}).then(res => {
                        loading.close()
                        if (res.status !== 1) {
                            return this.$message.error(res.info);             
                        }                    
                        this.$message.success('修改成功');
                        this.getDatalist()
                    }).catch(err => {
                        console.log(err)
                    })   
                    
                }).catch(() => {
                    this.getDatalist()
                    this.$message.info('已取消修改');
                });
          },
          //确认提交修改
          async checkSubmits(){       
            this.$refs.refsearchForm.validate(async valid => {
                if (!valid) return;
                let loading = this.$loading({
                    lock: true,
                    text: '数据修改中···',
                    spinner: 'el-icon-loading',
                    background: 'rgba(0, 0, 0, 0.7)'
                });                

               axios.post('/admin/menu/create', {params: this.createForm}).then(res => {
                    loading.close()
                    if (res.status !== 1) {
                        return this.$message.error(res.info);                  
                    }                
                    this.$message.success('操作成功');
                    this.ismenudialogVisible = false
                    this.getDatalist()
                }).catch(err => {
                    console.log(err)
                })
            })
          },
          //软禁用
          cancel($id){
                this.$confirm('确认需要禁用该菜单,如果有子菜单，则子菜单也会被禁用？', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    closeOnClickModal: false, // 禁用点击遮罩关闭弹窗
                    type: 'warning'
                }).then(() => {
                    let loading = this.$loading({
                        lock: true,
                        text: '菜单禁用中···',
                        spinner: 'el-icon-loading',
                        background: 'rgba(0, 0, 0, 0.7)'
                    });
                    axios.post('/admin/menu/delete', {params: {id: $id}}).then(res => {
                        loading.close()
                        if (res.status !== 1) {
                            return this.$message.error(res.info);             
                        }                    
                        this.$message.success('禁用成功');
                        this.getDatalist()
                    }).catch(err => {
                        console.log(err)
                    })
                }).catch(() => {
                    this.$message.info('已取消');
                    });
          },
          //关闭弹窗
          close(){
                this.ismenudialogVisible=false  
            },
            
            //修改状态
            handleStatusChange(rw){
                console.log(this.createForm.status)
                if(this.createForm.status === 0){
                    this.$confirm('确认关闭该菜单,如果有子菜单，则子菜单也会被关闭？', '提示', {
                        confirmButtonText: '确定',
                        cancelButtonText: '取消',
                        closeOnClickModal: false, // 禁用点击遮罩关闭弹窗
                        type: 'warning'
                    }).catch(() => {
                        this.createForm.status = 1;
                    });                  
                }
            }, 
            //伸缩
            toggleExpand() {
                this.isExpand = !this.isExpand;
                console.log(this.isExpand)
                this.toggleAllRows(this.tablelist, this.isExpand);
            },

            toggleAllRows(arr, expand) {
                arr.forEach(i => {
                    this.$refs.treeTable.toggleRowExpansion(i, expand);
                    if (i.children) {
                        this.toggleAllRows(i.children, expand);
                    }
                });
            }
      }
  })
  </script>
  </body>
</html>
